<html>
	<head>
		<title>Foo Bar</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.notifications.js"></script>
		<style>

			body, div, p, a
			{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
			}

			.motif
			{
				background: black;
				color: white;
				margin: 5px;
				padding: 5px;
				height: 50px;
				width: 200px;
				opacity: .75;
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
				filter: alpha(opacity=75);
			}

			.notif
			{
				background: black;
				color: white;
				margin: 5px;
				padding: 5px;
				height: 50px;
				width: 200px;
				opacity: .75;
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
				filter: alpha(opacity=75);
				cursor: pointer;
			}

		</style>
	</head>
	<body>
		<input id="button" type="submit" value="Add new..." />
		<script type="text/javascript">
			var notif = {
				debug: true,
				horz: 'right',
				vert: 'bottom',
				fadeSpeed: 'slow',
				sticky: true
			};
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			/*$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);
			$.notif('Lorem ipsum dolor sit amet...', notif);*/
			$('#button').click(function() {
				$.notif('Lorem ipsum dolor sit amet...', notif);
			});

		</script>
	</body>
</html>